import { useEffect, useState } from "react";
import XtxButton from "../xtxButton";
import "./index.scss";
function XtxMessageBox({
  title,
  text,
  onCancel,
  onConfirm,
}: {
  title: string;
  text: string;
  onConfirm: any;
  onCancel: any;
}) {
  const [show, setShow] = useState(false);
  useEffect(() => {
    setShow(true);
  }, []);
  return (
    <div className="xtx-confirm">
      {show && (
        <div className="wrapper">
          <div className="header">
            <h3>{title}</h3>
            <i className="iconfont icon-close-new" onClick={onCancel}></i>
          </div>
          <div className="body">
            <i className="iconfont icon-warning"></i>
            <span>{text}</span>
          </div>
          <div className="footer">
            <XtxButton size="mini" type="gray" emit={onCancel}>
              取消
            </XtxButton>
            <XtxButton size="mini" type="primary" emit={onConfirm}>
              确认
            </XtxButton>
          </div>
        </div>
      )}
    </div>
  );
}

export default XtxMessageBox;
